<!--
    Date：2023/3/1
    Content：电商后台管理的首页（框架页）

-->

<template>
    <el-container>
        <el-header>
            <el-row>
                <el-col :span="20" style="text-align:left;font-size:30px; font-weight: 600;">专高《智慧电商平台》后台管理</el-col>
                <el-col :span="4"><span @click="download">下载文件</span> {{ userInfo.loginName }}</el-col>
            </el-row>
        </el-header>
        <el-container class="my-section">
            <el-aside width="200px">
                <div>
                    <el-menu default-active="00" router class="el-menu-vertical-demo" @open="handleOpen"
                        @close="handleClose">
                        <el-submenu v-for="(item, index) in menuData" :key="index" :index="index + '0'">
                            <template slot="title">
                                <i class="el-icon-location"></i>
                                <span>{{ item.name }}</span>
                            </template>

                            <el-menu-item v-for="(subitem, subindex) in item.children" :key="subindex"
                                :index="subitem.url">
                                {{ subitem.name }}
                            </el-menu-item>
                        </el-submenu>

                        <!-- <el-submenu index="1">
                            <template slot="title">
                                <i class="el-icon-location"></i>
                                <span>权限管理</span>
                            </template>
                            <el-menu-item index="1-4-1">用户管理</el-menu-item>
                            <el-menu-item index="1-4-1">角色管理</el-menu-item>
                            <el-menu-item index="1-4-1">菜单管理</el-menu-item>                            
                        </el-submenu>
                        <el-submenu index="2">
                            <template slot="title">
                                <i class="el-icon-menu"></i>
                                <span>系统设置</span>
                            </template>
                            <el-menu-item index="1-4-1">修改密码</el-menu-item>
                            <el-menu-item index="1-4-1">数据备份</el-menu-item>                            
                        </el-submenu> -->
                        <!-- <el-menu-item index="3">
                            <i class="el-icon-document"></i>
                            <span slot="title">菜单三</span>
                        </el-menu-item>
                        <el-menu-item index="4">
                            <i class="el-icon-setting"></i>
                            <span slot="title">菜单四</span>
                        </el-menu-item> -->
                    </el-menu>
                </div>
            </el-aside>
            <el-main>
                <router-view />
            </el-main>
        </el-container>
    </el-container>
</template>



<script>

export default {
    data() {
        return {
            userInfo: {},
            menuData: [
                {
                    'name': '商品管理', 'children': [
                        { 'name': '品牌管理' ,url:'/admin/brand'},
                        { 'name': '分类管理' ,url:'/admin/category'},
                        { 'name': '商品管理',url:'/admin/product' }                        
                    ]
                },
                {
                    'name': '订单管理', 'children': [
                        { 'name': '订单列表' ,url:'/admin/order'}                       
                    ]
                },
                {
                    'name': '权限管理', 'children': [
                        { 'name': '用户管理' ,url:'/admin/rbac/user'},
                        { 'name': '角色管理',url:'/admin/rbac/role' },
                        { 'name': '菜单管理' ,url:'/admin/rbac/menu'}
                    ]
                },
                {
                    'name': '系统设置', 'children': [
                        { 'name': '修改密码' },
                        { 'name': '数据备份' }
                    ]
                }
            ]
        }
    },
    mounted() {
        //getItem返回的是字符串，我们需要将字符串序列化成json格式
        //this.userInfo = JSON.parse(localStorage.getItem('userinfo'))
        //this.getMenu(this.userInfo.id) //('e5b65900-ede4-4323-a0cf-783fa68cdf15')
    },
    methods: {
        //获取登录用户访问的权限菜单
        getMenu(id) {
            //let token = localStorage.getItem('token')
            let url = 'http://localhost:5218/rbac/user/getmenu?id=' + id
            this.$http.get(url).then(res => {
                //console.log(res)
                this.menuData = res.data.data
            })
        },
        handleOpen(key, keyPath) {
            console.log(key, keyPath);
        },
        handleClose(key, keyPath) {
            console.log(key, keyPath);
        },
        //下载文件示例
        download() {
            let url = this.$baseUrl + 'rbac/user/download'
            this.$http.get(url, {
                responseType: 'blob',
                // headers:{
                //     'Download-Request':'Download-Request'
                // }
            }).then(res => {
                let blob = new Blob([res.data], { 
                    type: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=UTF-8" 
                }); // 为blob设置文件类型，这里以.xlsx为例
                let url = window.URL.createObjectURL(blob); // 创建一个临时的url指向blob对象
                let a = document.createElement("a");
                a.href = url;
                a.click();
                // 释放这个临时的对象url
                window.URL.revokeObjectURL(url);
            })

        }
    }
}
</script>

<style>
#app,section{
  height:100%;
}
.my-section {
    height: calc(100% - 60px);
}

.el-header,
.el-footer {
    background-color: #B3C0D1;
    color: #333;
    text-align: center;
    line-height: 60px;
}

.el-aside {
    background-color: #D3DCE6;
    color: #333;
    text-align: center;
    line-height: 200px;
}

.el-main {
    background-color: #E9EEF3;
    color: #333;
    text-align: center;
    line-height: 160px;
}

body>.el-container {
    margin-bottom: 40px;
}

.el-container:nth-child(5) .el-aside,
.el-container:nth-child(6) .el-aside {
    line-height: 260px;
}

.el-container:nth-child(7) .el-aside {
    line-height: 320px;
}



.el-card__body,
.el-main {
    padding: 15px;
    line-height: normal;
    height: 100%;
}

/*具体页面样式 */
.box {
    background-color: #fff;
    padding: 0px;
    height: 100%;
    position: relative;
}

.box-path {
    height: 42px;
    line-height: 42px;
    text-align: left;
    border-left: 5px solid #f44f09;
    background-color: #e5dce1;
    font-weight: 600;
}
.box-path .el-breadcrumb{
    padding-top: 14px;
    padding-left: 5px;
}

.box-button {
    height: 50px;
    line-height: 50px;
    padding: 0 10px
}

.box-button .box-button-opt {
    text-align: left;
}

.box-button .box-button-txt {
    text-align: right;
}

.box-pages {
    height: 60px;
    line-height: 60px;
    position: absolute;
    bottom: 0;
    /* text-align: center; */
    width: 100%;
}

.box-data {
    padding: 0px 10px;
    height: calc(100% - 155px);
    overflow: auto;
}
</style>